.container {
  .banner {
    img {
      width: 100%;
    }
  }
  @keyframes text-detail {
    0% {
      background-color: #44444400;
    }

    100% {
      background-color: #444444;
    }
  }

  @keyframes text-detail-transition {
    0% {
      transform: translateX(0px);
      color: currentColor;
    }

    100% {
      transform: translateX(-60px);
      color: #fff;
    }
  }

  .acitivity-details {
    .swiper-slide {
      border-bottom: 1px solid #dbdbdb;
      background-color: #44444400;

      .details-text {
        position: relative;

        .date {
          float: left;
          color: #929292;

        }

        .text {

          h3 {
            color: black;
          }

          p {
            color: #4d4d4d;
          }
        }

        .right-arr {
          width: 30px;
          height: 40px;
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -20px;
          background: url(../../../img/right-arr.png) no-repeat center center;
          background-size: contain;
        }
      }

      &:hover,&.active{
        animation: text-detail .3s ease-in 1 both;
        .details-text {
          .date {
            animation: text-detail-transition .4s ease-out 1 both;
          }

          .text {

            h3 {
              animation: text-detail-transition .4s ease-out 1 both;
              transform: translateX(-60px);
            }

            p {
              animation: text-detail-transition .4s ease-out 1 both;
            }
          }
        }
      }
    }

    .swiper-pagination {
      .swiper-pagination-bullet {
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid #c9c9c9;
        color: #c9c9c9;
        border-radius: 0;
        text-align: center;
        line-height: 27px;
        background-color: transparent;
      }

      .swiper-pagination-bullet-active {
        background-color: #6d6d6d;
        border-color: #6d6d6d;
        color: #fefefe;
      }
    }
  }

}
    .footer {
      background-color: #f7f5fa;
      overflow: hidden;
      color: #3f3f3f;
    }